<!DOCTYPE html>
<html>
<head>
  <title>登陆</title>
  <link rel="stylesheet" href="#(backStage)/static/layui/css/layui.css">
  <script src="#(backStage)/static/layui/layui.js"></script>
  <style type="text/css">
  .captcha {
    position: relative;
    margin-top: -38px;
    margin-right: 1px;
    border: 1px solid #E6E6E6;
    height: 36px;
    float: right;
  }
  </style>
</head>
<body>

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md-offset4 layui-col-md4 layui-col-xs12">
      <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
        <legend>登录</legend>
      </fieldset>
      <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
          <label class="layui-form-label">账&nbsp;&nbsp;号</label>
          <div class="layui-input-block">
            <input type="text" name="username" lay-verify="username" placeholder="输入登录账号" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密&nbsp;&nbsp;码</label>
          <div class="layui-input-block">
            <input type="password" name="userpass" lay-verify="userpass" placeholder="输入登录密码" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">验证码</label>
          <div class="layui-input-block">
            <input type="text" name="captcha" lay-verify="captcha" placeholder="输入登录验证码" autocomplete="off" class="layui-input">
          </div>
          <div class="captcha">
            <img id="captcha" src="/tool/captcha" alt="captcha" title='点击切换' onclick="this.src='/tool/captcha?id='+Math.random()" style="height: 100%;">
          </div>
        </div>
        <input type="hidden" name="url" value="#(url??)">
        <div class="layui-form-item">
            <div style="text-align: center;">
              <button class="layui-btn" lay-submit="" lay-filter="login">立即登陆</button>
            </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script src="#(backStage)/static/js/jquery-1.8.3.min.js" charset="utf-8"></script>
<script src="#(backStage)/static/toast/toast.js" charset="utf-8"></script>
<script>
layui.use(['form'], function(){
  var form = layui.form;
  $('[name="username"]').focus();
  // 自定义验证
  form.verify({
    username: function(value) {
      if (value == '') {
        return '请输入账号';
      }
    },
    userpass: function(value) {
      if (value == '') {
        return '请输入密码';
      }
    },
    captcha: function(value) {
      if (value == '') {
        return '请填写验证码';
      }
    }
  });
  //
  form.on('submit(login)', function(data) {
    ToastLoading('正在登陆...');
    $.ajax({
      url : "#(adminRoot)/login/save",
      type : "post",
      data : data.field,
      success : function(ret){
        ToastShow(ret.code, ret.msg, ret.url);
        if (ret.state == 'fail') { $('#captcha').trigger("click"); }
      },
      error : function(){ ToastErr('网络错误'); }
    });
    return false;
  });
});
</script>
</body>
</html>
